<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery formValidator表单验证插件 -- by:wzmaodong@126.com</title>
<script src="jquery_last.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
<script src="pageValidator.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
	$("#test1").formValidator({empty:true,automodify:true,onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});
	$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱至少6个字符,最多100个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).RegexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});
	$("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});
	$("#test3").formValidator({onshow:"请选择你的兴趣爱好（至少选一个）",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});
	$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});
	$("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});
	$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间，请确认"});
	$("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"});
	$("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});
	$("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"你要是输入了，必须输入正确，格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?([0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
	$("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>
<style type="text/css" media="all">
body,div{font-size:12px; margin:10px;}
</style>
</head>

<body>
<h1>jQuery formValidator表单验证插件示例</h1>
<p>只有一个校验组的示例</p>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return jQuery.formValidator.PageIsValid('1')">
	
  <table border="0px" style="font-size:12px">
    <tr> 
      <td align="right">用户名:</td>
      <td><input type="text" id="test1" style="width:120px" /></td>
      <td><div id="test1Tip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">密码:</td>
      <td><input type="password" id="password1" style="width:120px" /></td>
      <td><div id="password1Tip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">重复密码:</td>
      <td><input type="password" id="password2" style="width:120px" /></td>
      <td></td>
    </tr>
    <tr> 
      <td align="right">你的年龄:</td>
      <td><input type="text" id="nl" style="width:120px" /></td>
      <td><div id="nlTip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">你的EMAIL:</td>
      <td><input type="text" id="email" style="width:120px" /></td>
      <td><div id="emailTip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">你的学历:</td>
      <td> <select name="select" id="xueli">
          <option value="">－－请选择你的学历－－</option>
          <option value="a">专科</option>
          <option value="b">本科</option>
          <option value="c">研究生</option>
          <option value="e">硕士</option>
          <option value="d">博士</option>
        </select> </td>
      <td><div id="xueliTip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">兴趣爱好1:</td>
      <td colspan="2"> <input type="checkbox" name="checkbox1" id="test3"/>
        乒乓球 
        <input type="checkbox" name="checkbox1" id="checkbox9" />
        羽毛球 
        <input type="checkbox" name="checkbox1" id="checkbox10" />
        上网 
        <input type="checkbox" name="checkbox1" id="checkbox11" />
        旅游 
        <input type="checkbox" name="checkbox1" id="checkbox12" />
        购物 
        <input type="checkbox" name="checkbox1" id="checkbox13" />
        睡觉 
        <input type="checkbox" name="checkbox1" id="checkbox14" />
        看书 
        <input type="checkbox" name="checkbox1" id="checkbox14" />
        听音乐 
        <input type="checkbox" name="checkbox1" id="checkbox14" />
        发呆 </td>
    </tr>
    <tr>
      <td colspan="3"><div id="test3Tip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">兴趣爱好2:</td>
      <td colspan="2"> <input type="checkbox" name="checkbox8" id="test2"/>
        乒乓球 
        <input type="checkbox" name="checkbox8" id="checkbox9" />
        羽毛球 
        <input type="checkbox" name="checkbox8" id="checkbox10" />
        上网 
        <input type="checkbox" name="checkbox8" id="checkbox11" />
        旅游 
        <input type="checkbox" name="checkbox8" id="checkbox12" />
        购物 
        <input type="checkbox" name="checkbox8" id="checkbox13" />
        睡觉 
        <input type="checkbox" name="checkbox8" id="checkbox14" />
        看书 
        <input type="checkbox" name="checkbox8" id="checkbox14" />
        听音乐 
        <input type="checkbox" name="checkbox8" id="checkbox14" />
        发呆 </td>
    </tr>
    <tr>
      <td colspan="3"><div id="test2Tip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">你爱国吗:</td>
      <td colspan="2"> <input type="radio" name="radio" value="1" id="aiguo"  />
        不爱 
        <input type="radio" name="radio" id="radio2" value="2" />
        不发表意见 
        <input type="radio" name="radio" id="radio3" value="3" />
        爱 
        <input type="radio" name="radio" id="radio5" value="4" />
        爱死它了 </td>
    </tr>
    <tr>
      <td colspan="3"><div id="aiguoTip" style="width:300px"></div></td>
    </tr>
    <tr> 
      <td align="right">你的手机号码:</td>
      <td><input type="text" id="shouji" style="width:120px" /></td>
      <td><div id="shoujiTip" style="width:300px"></div></td>
    </tr>
    <tr>
      <td align="right">联系电话:</td>
      <td><input type="text" id="lxdh" style="width:120px" /></td>
      <td><div id="lxdhTip" style="width:400px"></div></td>
    </tr>
    <tr>
      <td align="right" valign="top">你的描述:</td>
      <td colspan="2" valign="top">
<textarea id="ms" cols="82" rows="10"></textarea>
      </td>
    </tr>
    <tr>
      <td colspan="3"><div id="msTip" style="width:300px"></div></td>
    </tr>
  </table>
  <br />
  
    <input type="submit" name="button" id="button" value="提交" />
  
</form>
</body>
</html>
